<template>
  <div>
    <!-- 顶部面包屑标识与导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px;">
      <el-breadcrumb-item :to="{ path: '/' }">
        <i class="el-icon-s-promotion"></i> 后台首页
      </el-breadcrumb-item>
      <el-breadcrumb-item>销售管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品销售</el-breadcrumb-item>
    </el-breadcrumb>

    <!--    下拉选查询-->
    <el-select class="f1" v-model="condition.customerId" clearable placeholder="客户名称_请选择_查询">
      <el-option
          v-for="item in options1"
          :key="item.id"
          :label="item.customerName"
          :value="item.id">
      </el-option>
    </el-select>

    <!--    下拉选查询-->
    <el-select class="f2" v-model="condition.goodsId" clearable placeholder="商品名称_请选择_查询">
      <el-option
          v-for="item in options2"
          :key="item.id"
          :label="item.goodsName"
          :value="item.id">
      </el-option>
    </el-select>

    <!--    下拉选查询-->
    <el-select class="f3" v-model="condition.approvalStatus" clearable placeholder="审核状态_请选择_查询">
      <el-option
          v-for="item in options3"
          :key="item.approvalStatus"
          :label="item.approvalStatusName"
          :value="item.approvalStatus">
      </el-option>
    </el-select>

    <!--    时间选择器-->
    <el-date-picker
        class="f4"
        v-model="condition.begin"
        type="date"
        placeholder="起始时间_请选择_查询">
    </el-date-picker>

    <!--    时间选择器-->
    <el-date-picker
        class="f5"
        v-model="condition.end"
        type="date"
        placeholder="结束时间_请选择_查询">
    </el-date-picker>

    <br>
    <br>

    <!--    新增销售订单_打开表单-->
    <span style="margin-top: 20px">
      <el-button type="text" @click="dialogFormVisible1 = true">新增销售订单_打开表单</el-button>

      <el-dialog title="新增销售订单" :visible.sync="dialogFormVisible1">

        <el-form :model="formAdd" :rules="rules1" label-position="left">
          <el-form-item label="客户名称" :label-width="formLabelWidth" prop="customerId">
            <el-select v-model="formAdd.customerId" clearable placeholder="客户名称_请选择_新建">
              <el-option
                  v-for="item in options1"
                  :key="item.id"
                  :label="item.customerName"
                  :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商品名称" :label-width="formLabelWidth" prop="goodsId">
            <el-select v-model="formAdd.goodsId" clearable placeholder="商品名称_请选择_新建">
              <el-option
                  v-for="item in options2"
                  :key="item.id"
                  :label="item.goodsName"
                  :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="销售数量" prop="number"
                        :rules="[{ required: true, message: '销售数量不能为空'},{ type: 'number', message: '销售数量必须为数字值'}]">
            <el-input v-model.number="formAdd.number" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="销售价格" prop="salePrice"
                        :rules="[{ required: true, message: '销售价格不能为空'},{ type: 'number', message: '销售价格必须为数字值'}]">
            <el-input v-model.number="formAdd.salePrice" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="备注" prop="description">
            <el-input type="textarea" v-model="formAdd.description"></el-input>
          </el-form-item>
          <el-form-item label="支付类型" prop="payType">
            <el-radio-group v-model="formAdd.payType">
              <el-radio label="支付宝"></el-radio>
              <el-radio label="微信"></el-radio>
              <el-radio label="银行卡"></el-radio>
              <el-radio label="现金"></el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer1">
          <el-button @click="dialogFormVisible1 = false">取 消</el-button>
          <el-button type="primary" @click="addNewBusSales('ruleForm')">确 定</el-button>
        </div>

      </el-dialog>
    </span>

    <!--    修改销售订单_打开表单-->
    <span style="margin-top: 20px">
      <el-button type="text" @click="dialogFormVisible2 = true">修改销售订单_打开表单</el-button>

      <el-dialog title="修改销售订单" :visible.sync="dialogFormVisible2">

        <el-form :model="formUpd" :rules="rules2" label-position="left">


        </el-form>

        <div slot="footer" class="dialog-footer2">
          <el-button @click="dialogFormVisible2 = false">取 消</el-button>
          <el-button type="primary" @click="dialogFormVisible2 = false">确 定</el-button>
        </div>

      </el-dialog>
    </span>

    <!--    查询列表-->
    <div style="margin-top: 20px">
      <el-table
          :data="tableData"
          style="width: 100%"
          height="475">
        <el-table-column fixed prop="id" label="ID" width="120"></el-table-column>
        <el-table-column prop="customerName" label="客户名称" width="120"></el-table-column>
        <el-table-column prop="goodsName" label="商品名称" width="120"></el-table-column>
        <el-table-column prop="nickname" label="操作人员名称" width="120"></el-table-column>
        <el-table-column prop="number" label="销售数量" width="120"></el-table-column>
        <el-table-column prop="description" label="备注" width="120"></el-table-column>
        <el-table-column prop="salePrice" label="销售价格" width="120"></el-table-column>
        <el-table-column prop="payType" label="支付类型" width="120"></el-table-column>
        <el-table-column prop="gmtCreate" label="创建时间" width="120"></el-table-column>
        <el-table-column prop="gmtModified" label="最后操作时间" width="120"></el-table-column>
        <el-table-column prop="approvalStatus" label="审批状态" width="120"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
                size="mini"
                type="danger"
                @click="deletelist(scope.row.id)">取消
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!--    分页控制器-->
    <div align="center" style="margin-right: 400px;margin-top: 20px">
      <el-pagination
          @size-change="testList"
          @current-change="testList"
          :current-page.sync=condition.page
          :page-sizes="[5, 10, 15, 20]"
          :page-size.sync=condition.pageSize
          layout="total, sizes, prev, pager, next, jumper"
          :total=count>
      </el-pagination>
    </div>

    <!--    查询按钮-->
    <div align="center" style="margin-right: 400px">
      <el-row class="button">
        <el-button type="primary" @click="testList">查询</el-button>
      </el-row>
    </div>

  </div>


</template>

<script>
export default {
  data() {
    return {
      //查询_列表
      condition: {
        customerId: '',
        goodsId: '',
        approvalStatus: '',
        begin: '',
        end: '',
        page: 1,
        pageSize: 5,
      },
      tableData: [],
      count: 0,
      //查询_下拉选
      options1: [],
      options2: [],
      options3: [{
        approvalStatus: '0',
        approvalStatusName: '未处理'
      }, {
        approvalStatus: '1',
        approvalStatusName: '同意'
      }, {
        approvalStatus: '2',
        approvalStatusName: '拒绝'
      }, {
        approvalStatus: '3',
        approvalStatusName: '退货'
      }],
      //新增_表单
      dialogFormVisible1: false,
      formAdd: {
        customerId: '',
        goodsId: '',
        number: '',
        description: '',
        salePrice: '',
        payType: '',
      },
      formLabelWidth: '120px',
      //修改_表单
      dialogFormVisible2: false,
      formUpd: {},
      //验证规则
      rules1: {
        customerId: [
          {required: true, message: '请选择客户名称', trigger: 'change'}
        ],
        goodsId: [
          {required: true, message: '请选择商品名称', trigger: 'change'}
        ],
        description: [
          {required: true, message: '请填写活动形式', trigger: 'blur'}
        ],
        payType: [
          {required: true, message: '请选择活动资源', trigger: 'change'}
        ],
      },
      rules2: {}
    }

  },
  //页面还没有初始化元素的时候会执行
  created() {

  },
  //页面静态元素已经初始化完毕执行
  mounted() {
    //页面查询
    this.testList();
    this.list();
  },
  methods: {
    //新增销售订单
    addNewBusSales() {
      if (!this.formAdd.customerId) {
        this.$message.warning('请输入有效的值_客户名称')
        return;
      }
      if (!this.formAdd.goodsId) {
        this.$message.warning('请输入有效的值_商品名称')
        return;
      }
      if (!this.formAdd.number) {
        this.$message.warning('请输入有效的值_销售数量')
        return;
      }
      if (!this.formAdd.description) {
        this.$message.warning('请输入有效的值_备注')
        return;
      }
      if (!this.formAdd.salePrice) {
        this.$message.warning('请输入有效的值_售出价格')
        return;
      }
      if (!this.formAdd.payType) {
        this.$message.warning('请输入有效的值_支付类型')
        return;
      }

      this.dialogFormVisible1 = false;
      let url5 = 'http://localhost:9090/busSales/add-new';
      console.log('url = ' + url5);
      console.log(this.formAdd)

      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('localJwt')}})
          .post(url5, this.formAdd).then(
          (response) => {
            let jsonResult = response.data;
            if (jsonResult.state == 20000) {
              let title = '操作成功';
              this.$alert(jsonResult.message, title, {
                    confirmButtonText: '确定',
                    callback: action => {
                      this.testList()
                    }
                  }
              );
            } else {
              let title = '操作失败';
              this.$alert(jsonResult.message, title, {
                    confirmButtonText: '确定',
                    callback: action => {
                    }
                  }
              );
            }
          }
      );
    },

    //分页模糊查询
    testList() {
      let url3 = 'http://localhost:9090/busSales/select';
      console.log('url = ' + url3);
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('localJwt')}})
          .post(url3, this.condition).then(
          (response) => {
            let jsonResult = response.data;
            if (jsonResult.state == 20000) {
              this.tableData = jsonResult.data.rows;
              this.count = jsonResult.data.total;
            } else {
              let title = '操作失败';
              this.$alert(jsonResult.message, title, {
                    confirmButtonText: '确定',
                    callback: action => {
                    }
                  }
              );
            }
          }
      );
    },

    //逻辑删除
    deletelist(id) {
      let url4 = 'http://localhost:9090/busSales/delete';
      console.log('url = ' + url4);
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('localJwt'), 'Content-Type': 'application/json'}})
          .post(url4, id).then(
          (response) => {
            let jsonResult = response.data;
            console.log(response.data)
            if (jsonResult.state == 20000) {
              let title = '操作成功';
              this.$alert(jsonResult.message, title, {
                    confirmButtonText: '确定',
                    callback: action => {
                      this.testList()
                    }
                  }
              );
            } else {
              let title = '操作失败';
              this.$alert(jsonResult.message, title, {
                    confirmButtonText: '确定',
                    callback: action => {
                    }
                  }
              );
            }
          }
      );
    },

    //下拉选查询
    list() {
      let url1 = 'http://localhost:9090/busSales/selectCN';
      console.log('url = ' + url1);
      let url2 = 'http://localhost:9090/busSales/selectGN';
      console.log('url = ' + url2);

      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('localJwt')}})
          .post(url1).then(
          (response) => {
            let jsonResult = response.data;
            if (jsonResult.state == 20000) {
              this.options1 = jsonResult.data;
            } else {
              let title = '操作失败';
              this.$alert(jsonResult.message, title, {
                    confirmButtonText: '确定',
                    callback: action => {
                    }
                  }
              );
            }
          }
      );
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('localJwt')}})
          .post(url2).then(
          (response) => {
            let jsonResult = response.data;
            if (jsonResult.state == 20000) {
              this.options2 = jsonResult.data;
            } else {
              let title = '操作失败';
              this.$alert(jsonResult.message, title, {
                    confirmButtonText: '确定',
                    callback: action => {
                    }
                  }
              );
            }
          }
      );

    },
  },
}

</script>

<style>
.f1 {
  margin-top: 40px;
}

.f2 {
  margin-left: 40px;
}

.f3 {
  margin-left: 40px;
}

.f4 {
  margin-left: 40px;
}

.f5 {
  margin-left: 40px;
}

span {
  margin-right: 20px;
}

.button {
  margin-top: 20px;
}
</style>